<template>
	<view class="station-page">
		<block v-for="(lineItem,lineIndex) in lineList" :key="lineIndex">
			<view class="collection-list" @click="goLinesPage(lineItem)">
				<view class="collection-list-item">
					<view class="line-name">
						<view class="left">{{lineItem.lineName}}</view>
						<view class="right">
							<image src="/static/images/bus/an_realtime.gif"></image>
							<text v-if="lineItem.isRun==null" style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
							<text v-else>{{lineItem|formatDisplay}}</text>
						</view>
					</view>
					<view class="line-direction">
						{{lineItem.segmentName}}
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stationData:'',//站点信息
				stationName:'',//站点信息
				cityName:'',
				lineList:[],//线路列表
				stationListSetInterTime:null //定时器
			};
		},
		onLoad(option) {
			// console.log(JSON.stringify(option));
			// var option = {"stationName":"国际会议中心"};
			// console.log(uni.getStorageSync('cityData'));
			// this.stationData = JSON.parse(option.stationData);
			// this.lineList = this.stationData.nearbySegment;
			
			uni.setNavigationBarTitle({
				title:option.stationName
			})
			// 城市名称
			this.stationName = option.stationName;
			this.cityName = uni.getStorageSync('cityData').city;
			this.getStationNameLine(true);
			
		},
		onShow() {
			let that = this;
			clearInterval(this.stationListSetInterTime);
			this.stationListSetInterTime = setInterval(() => {
				that.getNearStationBusTime();
			}, 15000);
		},
		onPullDownRefresh() {
			this.getStationNameLine(true);
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},1500)
		},
		onUnload() {
			clearInterval(this.stationListSetInterTime);
		},
		onHide() {
			clearInterval(this.stationListSetInterTime);
		},
		filters:{
			formatDisplay(val){
				if(val.isRun==null){
					return '正在查询';
				}
				if(!val.isRun){
					return '不在运营时间';
				}
				if(val.targetStationCount==null){
					return '等待发车';
				}
				if(val.targetStationCount==0){
					return '已到站';
				}
				if(val.targetStationDistance<400 && val.targetStationCount>0){
					return '即将到站';
				}
				
				let time = val.targetStationDistance/val.speed;
				
				return `${(time/60).toFixed(0)}分钟 • ${val.targetStationCount}站`;
			}
		},
		methods: {
			// 获取站点下所有公交
			getStationNameLine(isShowLoading) { 
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
						stationName: that.stationName,
						city: that.cityName
					};
				this.$request({
					url: this.$API.getStationNameLine,
					method: 'GET',
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: isShowLoading,
					lodingText: '加载中...'
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.lineList = res.data;
						// 获取实时数据
						that.getNearStationBusTime();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			//到站时间，index站点的数组索引
			getNearStationBusTime(isShowLoading){ 
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
					// stationIdz:this.stationData.stationId, //站点id
					stationName:that.stationName //站点名
				};
				this.$request({
					url: this.$API.getNearStationBusTime,
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: isShowLoading,
					lodingText: '正在刷新...'
				}).then(res => {
					// console.log("hhhh="+JSON.stringify(res));
					if (res.code == 200) {
						that.lineList = res.data;
					} 
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			goLinesPage(lineItem) { //跳转到详情页
				clearInterval(this.stationListSetInterTime);
				// #ifdef MP || H5
				uni.navigateTo({
					url: `../real_bus/xr_line_detail?source=1&stationName=${this.stationName}&lineId=${lineItem.lineId}`
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `../real_bus/xr_line_detail_app?source=1&stationName=${this.stationName}&lineId=${lineItem.lineId}`
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.station-page{
		min-height: calc(100vh - var(--window-top));
		background-color: #FFFFFF;
		padding: $uni-spacing-col-base 0rpx;
	}
	// 收藏列表
	.collection-list {
		.collection-list-item {
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx 40rpx;
			margin: $uni-spacing-col-base $uni-spacing-row-base;
			
			.line-name {
				display: flex;
				justify-content: space-between;
	
				.left {
					font-weight: bold;
					color: rgba(0, 0, 0, 0.87);
				}
	
				.right {
					font-size: 32rpx;
					color: #26a2ff;
					// color: #8f8f8f; //另一种字体颜色
					font-weight: bold;
	
					image {
						margin-right: 10rpx;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}
	
			.line-direction {
				color: rgba(0, 0, 0, 0.38);
				margin-top: 12rpx;
				font-size: 28rpx;
				text {
					margin-left: 14rpx;
				}
			}
		}
	}
</style>
